<template>
  <div class="content-wrapper">
    <!-- <div class="content-header"></div>
        <div class="title">
      <div>我发起的</div>
    </div>
    <el-divider></el-divider> -->
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="流程类型">
          <el-select v-model="listQuery.flowType" size="mini">
            <el-option
              v-for="item in flowTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件编号">
          <el-input
            v-model="listQuery.documentCode"
            type="text"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="发起时间范围">
          <el-date-picker
            v-model="listQuery.startCreateTime"
            type="datetime"
            placeholder="选择开始时间"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <span> - </span>
          <el-date-picker
            v-model="listQuery.endCreateTime"
            type="datetime"
            placeholder="选择截止时间"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          v-if="list"
          v-loading="listLoading"
          height="500"
          :data="list"
          highlight-current-row
        >
          <el-table-column
            label="流程类型"
            prop="flowTypeName"
            width="120px"
            sortable
          />
          <el-table-column
            label="文件编号"
            prop="documentCode"
            min-width="220"
            sortable
          />
          <el-table-column
            label="文件名称"
            prop="documentName"
            min-width="180px"
            show-overflow-tooltip
          />
          <el-table-column
            label="紧急程度"
            prop="urgentName"
            width="100"
            align="center"
          />
          <el-table-column
            label="申请原因"
            prop="reason"
            align="left"
            show-overflow-tooltip
            min-width="200px"
          />
          <el-table-column label="当前阶段" prop="phaseName" width="100px" />
          <el-table-column
            label="发起时间"
            prop="accessTimeString"
            width="150px"
          />
          <el-table-column
            label="操作"
            align="center"
            width="60px"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-dropdown trigger="click" class="filter-item">
                <el-button type="text"><i class="el-icon-more" /></el-button>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item
                    @click.native.prevent="preview(row)"
                  >查看</el-dropdown-item>
                  <el-dropdown-item
                    v-if="row.phase != 'end' && row.phase != 'cancel'"
                    @click.native.prevent="termination(row)"
                  >取消申请
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page-number.sync="listQuery.pageNumber"
          :page-size.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <SearchPersonnelType
      :search-personnel-type-data="SearchPersonnelTypeData"
      @dataList="dataList"
    />
    <el-dialog title="取消流程申请" :visible.sync="dialogVisible" width="31%">
      <el-form label-width="80px">
        <el-form-item label="申请原因">
          <el-input
            v-model.trim="temp.reason"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="审批人" prop="name">
          <el-tag
            v-for="(tag, index) in temp.reviewName"
            :key="index"
            :disable-transitions="false"
            class="tag"
          >
            {{ tag.userName }}
          </el-tag>
          <el-button
            size="mini"
            round
            circle
            icon="el-icon-plus"
            @click="openReview(0, 'qa', 'QA', 1)"
          />
        </el-form-item>
      </el-form>
      <!-- :before-close="handleClose" -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancelApply">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  pageStartDocumentFlow,
  getPhaseSmall,
  Termination,
  pushCancelApply
} from '@/api/xd/documentFlow'
import { listDictTreeItem } from '@/api/base/dict'
import SearchPersonnelType from '@/components/SearchUserType/index.vue'
import '@/styles/flow.scss'

export default {
  components: { Pagination, SearchPersonnelType },
  data() {
    return {
      flowTypeOptions: [],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        flowType: null,
        documentCode: null,
        startCreateTime: null,
        endCreateTime: null
      },
      list: null,
      total: 0,
      listLoading: true,
      SearchPersonnelTypeData: {},
      dialogVisible: false,
      temp: {
        reviewName: ''
      }
    }
  },
  mounted() {
    listDictTreeItem({ dictGroupCode: 'flow_type' }).then((response) => {
      const array = response.data || []
      array.splice(0, 0, { label: '全部', value: null })
      this.flowTypeOptions = array
    })
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageStartDocumentFlow(this.listQuery)
        .then((response) => {
          this.list = response.data.rows
          this.total = response.data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    preview(row) {
      this.$router.push({
        path: '/flow/start',
        query: {
          phase: getPhaseSmall(row.phase),
          row: JSON.stringify(row)
        }
      })
    },
    // 终止流程
    termination(row) {
      this.dialogVisible = true
      this.temp.documentFlowId = row.documentFlowId
    },
    openReview(val, type, title, temp) {
      this.SearchPersonnelTypeData = {
        val: val,
        type: type,
        dialogVisible: true,
        title: title,
        temp: this.temp
      }
    },
    dataList(val) {
      this.temp.reviewId = val[0].userId
      this.temp.reviewName = val
    },

    cancelApply() {
      const data = {
        documentFlowId: this.temp.documentFlowId,
        reason: this.temp.reason,
        documentHandlerUserId: this.temp.reviewId
      }
      if (!data.reason) {
        this.$message.warning('申请原因不可为空')
        return
      }
      if (!data.documentHandlerUserId) {
        this.$message.warning('审核人不可为空')
        return
      }
      pushCancelApply(data).then((res) => {
        if (res.code == 1) {
          this.$message.success('申请成功')
        }
      })
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss">
</style>
